<template>
  <view class="order-box">
    <Sub-title
      :label="`订单编号：${data.sn || '-'}`"
      size="28rpx"
      :bold="false"
      color="#fff"
      padding="0 0 30rpx 0"
    />
    <Sub-title
      :label="`订单类型：${getType(data.goodsType)}`"
      size="28rpx"
      :bold="false"
      color="#fff"
      padding="0 0 30rpx 0"
      border
    />
    <Sub-title
      :label="`订单时间：${data.createTime || '-'}`"
      size="28rpx"
      :bold="false"
      color="#fff"
      :right-text="getStatus(data.orderStatus)"
      right-color="#FFB978"
      padding="30rpx 0 20rpx 0"
    />
    <view class="order-info f f-ac f-jb">
      <image :src="webSrc('/profile/static/icon-car.png')" mode="scaleToFill" />
      <view class="f-1 f f-col f-ja">
        <Sub-title
          label="充值缴费"
          size="28rpx"
          color="#fff"
          :right-text="`￥${data.goodsPrice || '-'}`"
          right-color="#fff"
          padding="0"
        />
        <Sub-title label="X 1" size="28rpx" color="#fff" :bold="false" padding="0" />
      </view>
    </view>
    <view class="btn-box mt-20  f f-ac f-jb">
    <Sub-title :label="`已付金额：${data.finalPrice}元`" size="26rpx" color="#24de73" :bold="false" padding="0" />
    <view class="f-1 f f-ac f-je">
      <button
        class="btn-item bg-green"
        v-if="data.orderStatus == 'PAID' && data.goodsType == 'WALLET_RECHARGE'"
        open-type="contact"
      >
        我要退款
      </button>
      <button class="btn-item" v-if="data.orderStatus == 'PAID'" @click="handleBuy">
        再次购买
      </button>
      <button class="btn-item" v-if="data.orderStatus == 'UNPAID'" @click="handleCancel">
        取消订单
      </button>
      <button class="btn-item" v-if="data.orderStatus == 'UNPAID'" @click="payPrice">
        继续购买
      </button>
    </view>
    </view>
  </view>
</template>

<script>
import { getPay } from "@/request/payApi.js";
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 唯一标识（下标）
    index: {
      type: Number,
      default: 0,
    },
  },

  mounted() {},
  methods: {
    // 获取订单状态
    getStatus(key) {
      switch (key) {
        case "PAID":
          return "已支付";
          break;
        case "UNPAID":
          return "未支付";
          break;
        case "CANCEL":
          return "已取消";
          break;
        default:
          return "-";
          break;
      }
    },
    // 获取订单类型
    getType(key) {
      switch (key) {
        case "MONTH_CHARGE":
          return "充电月卡";
          break;
        case "QUARTER_CHARGE":
          return "充电季卡";
          break;
        case "YEAR_CHARGE":
          return "充电年卡";
          break;
        case "MONTH_DEPOSIT":
          return "停车月卡";
          break;
        case "QUARTER_DEPOSIT":
          return "停车季卡";
          break;
        case "YEAR_DEPOSIT":
          return "停车年卡";
          break;
        case "WALLET_RECHARGE":
          return "余额充值";
          break;
        default:
          return "-";
          break;
      }
    },
    // 取消订单
    handleCancel() {
      this.$emit("cancel", {
        index: this.index,
        data: this.data,
      });
    },
    // 再次购买
    handleBuy() {
      this.$emit("buy", {
        index: this.index,
        data: this.data,
      });
    },
    // 支付
    payPrice() {
      getPay("WECHAT", "MP", {
        orderType: "ORDER",
        sn: this.data.sn,
        clientType: "MP",
      }).then((res) => {
        if (res.code == 200) {
          let pay = res.data;
          uni.requestPayment({
            appId: pay.appId,
            nonceStr: pay.nonceStr,
            package: pay.package,
            paySign: pay.paySign,
            signType: pay.signType,
            timeStamp: pay.timeStamp,
            success: () => {
              setTimeout(() => {
                uni.redirectTo({
                  url: `/pages/pay/payed?price=${this.data.finalPrice}`,
                });
              }, 1500);
            },
          });
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-box {
  height: auto;
  margin: 30rpx;
  border-radius: 30rpx;
  padding: 30rpx;
  background: linear-gradient(
    180deg,
    rgba(36, 222, 115, 0.35) 0%,
    rgba(255, 255, 255, 0.35) 82.29%
  );
  backdrop-filter: blur(20rpx);
  .order-info {
    padding: 0 0 30rpx 0;
    border-bottom: 1rpx solid #d9d9d999;
    image {
      width: 112rpx;
      height: 112rpx;
      border-radius: 10rpx;
      background-color: #00000080;
      margin-right: 20rpx;
    }
    .f-1 {
      height: 112rpx;
    }
  }
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn-item {
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 10rpx;
      width: 160rpx;
      font-size: 26rpx;
      text-align: center;
      color: #24de73;
      border: 1rpx solid #24de73;
      background-color: transparent;
      margin-right: 20rpx;
      margin-left: 0;
      &:active {
        color: #fff;
        background-color: #25ca6a;
      }
      &:last-child {
        margin-right: 0;
      }
    }
    .bg-green {
      color: #fff;
      background-color: #24de73;
    }
  }
}
</style>
